<template>
  <div class="AuxiliaryLiveData">
    <div class="fromed">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="4">
            <el-row :gutter="15">
              <el-col :span="24">
                <!-- <el-form-item label="所属地市：" prop="time">
                  <el-select
                    v-model="formData.city"
                    placeholder="请选择所属地市"
                    clearable
                    filterable
                    :style="{width: '100%'}"
                  >
                    <el-option
                      v-for="(item, index) in queryCitysList"
                      :key="index"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>-->
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="变电站名称：" prop>
                  <el-select
                    v-model="formData.station"
                    placeholder="请选择下拉变电站"
                    clearable
                    filterable
                    :style="{width: '100%'}"
                  >
                    <el-option
                      v-for="(item, index) in stationList"
                      :key="index"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="测点名称：" prop="source">
                  <el-input
                    placeholder="请输入测点名称"
                    v-model="formData.pointName"
                    clearable
                    :style="{width: '100%'}"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="所属系统：" prop="source">
                  <el-select
                    v-model="formData.systemId"
                    placeholder="请选择所属系统"
                    clearable
                    filterable
                    :style="{width: '100%'}"
                  >
                    <el-option
                      v-for="(item, index) in querySystemsList"
                      :key="index"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="监测类型：" prop="source">
                  <el-select
                    v-model="formData.jclx"
                    placeholder="请选择监测类型"
                    clearable
                    filterable
                    :style="{width: '100%'}"
                  >
                    <el-option
                      v-for="(item, index) in jclxOptions"
                      :key="index"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4">
            <div class="AuxiliaryLiveData-btn">
              <el-button type="primary" @click="submitForm">查询</el-button>
              <el-button type="primary" @click="resForm">刷新</el-button>
            </div>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <div
      class="tableed bigTableStyle"
      v-loading="loading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-table
        :data="tableData"
        height="100%"
        :row-class-name="tableRowClassName"
        style="width: 100%;height:100%;"
        border
      >
        <el-table-column prop="myIndex" label="序号" width="80"></el-table-column>
        <el-table-column prop="BDZMC" label="变电站名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="XTMC" label="所属系统" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="SSQYMC" label="区域/房间" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="LXMC" label="监测类型" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="CDMC" label="测点名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="VAL" label="监测结果" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <!-- 2-遥信-状态 -->
            <div v-if="scope.row.REMOTE_TYPE=='2'">
              <span>{{scope.row.VAL=='0.00'?'正常':'告警'}}</span>
            </div>
            <!-- 3-遥控-开关变位-->
            <div v-else-if="scope.row.REMOTE_TYPE=='3'">
              <span>{{scope.row.VAL=='0.00'?'关闭':'开启'}}</span>
            </div>
            <!--1 遥测 数值  4-遥调-暂无 -->
            <div v-else>
              <span>{{scope.row.VAL}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="JCSJ" label="数据上传时间"></el-table-column>
        <el-table-column prop="STATUS" label="报警状态"></el-table-column>
      </el-table>
    </div>
    <div class="paged elPaginationStyle">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[10, 20, 30]"
        :page-size="pages.pageSize"
        layout="total,prev, pager, next,sizes, jumper"
        :total="pages.totalSize"
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import lodash from "lodash";
import { publicAPIModule } from "@/store/modules/public";

@Component
export default class AuxiliaryLiveData extends Vue {
  loading: boolean = false;
  //搜索框from表单数据
  formData = {
    systemId: "",
    city: "",
    jclx: "",
    pointName: "",
    station: "",
  };
  // 前一个表单数据
  oldForm = {};
  rules = {
    time: [],
    alarm: [],
    source: [],
    name: [],
  };

  jclxOptions: { [key: string]: any } = [];
  $refs!: {
    elForm: any;
  };
  // 单位列表
  get queryCitysList() {
    let queryCitysList = publicAPIModule.queryCitysList || [];
    return queryCitysList;
  }
  // 变电站列表
  get stationList() {
    let stationList = publicAPIModule.SubstationList || [];
    stationList = lodash.cloneDeep(stationList);
    let obj = {
      code: "",
      name: "全部",
    };
    stationList.unshift(obj);
    return stationList;
  }
  // 系统列表
  get querySystemsList() {
    let querySystemsList = publicAPIModule.querySystemsList || [];
    return querySystemsList;
  }
  // 查询
  submitForm() {
    this.$refs.elForm.validate((valid: any) => {
      if (!valid) return;
      // TODO 提交表单
      this.pages.page = 1;
      this.queryAuxRealtimeList();
    });
  }
  // 刷新
  resForm() {
    this.pages.page = 1;
    this.formData = {
      systemId: "",
      city: "",
      jclx: "",
      pointName: "",
      station: "",
    };
    this.queryAuxRealtimeList();
  }

  //table表格相关事件数据
  tableData: any[] = [];
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }

  //分页数据事件相关
  pages: { pageSize: number; page: number; totalSize: number } = {
    pageSize: 20,
    page: 1,
    totalSize: 0,
  };
  //   分页
  handleSizeChange(val: any) {
    this.pages.pageSize = val;
    this.pages.page = 1;
    this.queryAuxRealtimeList();
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.pages.page = val;
    this.queryAuxRealtimeList();
  }
  // 监听查询条件变化
  @Watch("formData", { immediate: true, deep: true })
  setCdType(newForm) {
    let oldForm: any = this.oldForm;
    // 如果变电站id变化
    if (newForm.station !== oldForm.station) {
      this.formData.jclx = "";
      this.queryTypes();
    }
    this.oldForm = lodash.cloneDeep(newForm);
  }
  // 查询测点类型
  queryTypes() {
    let form = this.formData;
    let params = {
      station: form.station,
      type: "fk",
    };
    (this as any).$services
      .queryTypes({ data: params })
      .then((result: any) => {
        this.jclxOptions = result.data;
        this.jclxOptions.unshift({
          LXMC: "全部",
          code: "",
          name: "全部"
        })
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 查询当前表格数据
  queryAuxRealtimeList() {
    this.loading = true;
    let form = {
      city: this.formData.city,
      jclx: this.formData.jclx,
      page: this.pages.page,
      pointName: this.formData.pointName,
      size: this.pages.pageSize,
      station: this.formData.station,
      systemId: this.formData.systemId,
    };
    (this as any).$services
      .queryAuxRealtimeList({ data: form, method: "post" })
      .then((result: any) => {
        this.loading = false;
        let data = result.data;
         let page = this.pages.page;
      let size = this.pages.pageSize;
        this.tableData = data.records.map((v, i) => {
        v.myIndex = (page - 1) * size + i + 1;
        return v;
      });
        this.pages.totalSize = data.total;
      })
      .catch((err: object) => {
        this.loading = false;
        console.log(err);
      });
  }
  mounted() {
    // 查询表格数据
    this.queryAuxRealtimeList();
  }
}
</script>

<style lang="scss" scoped>
.AuxiliaryLiveData {
  width: 100%;
  height: 100%;
  &-btn {
    display: flex;
    justify-content: space-around;
  }
  .fromed {
    height: 60px;
  }
  .tableed {
    height: calc(100% - 120px);
  }
  .paged {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

